<script setup>
import { ref, computed, onMounted } from "vue";
import { ArrowLeftBold, ArrowRightBold } from "@element-plus/icons-vue";

import { useProcessStoreHook } from "@renderer/store/modules/process";
import { useScrollBarDragger } from "@renderer/utils/dragger";

import useLoading from "../../utils/loading";
import { ElMessage } from "element-plus";

const processStore = useProcessStoreHook();

const visible = ref(false);

const selectBoxHeight = ref(0);
onMounted(() => {
  selectBoxHeight.value = window.innerHeight - 70 - 60;
  addEventListener("resize", () => (selectBoxHeight.value = window.innerHeight - 70 - 60));
});

// 设置滚动条方法
const selectScrollRef = ref(null);
const selectDragger = useScrollBarDragger(selectScrollRef);

const partName = computed(() => {
  if (processStore.doingModels?.length > 0) {
    if (processStore.modelCode && processStore.modelName) {
      return processStore.modelName + `【${processStore.modelCode}】`;
    } else {
      return "请先选择零件型号";
    }
  } else {
    return "查无可选零件型号";
  }
});

async function toSelectModel() {
  const loading = useLoading();
  const res = await processStore.getPartModels();
  loading.close();
  if (processStore.doingModels.length > 0) {
    visible.value = true;
  } else {
    if (res.code !== 0) {
      ElMessage.error(res.msg);
    } else {
      ElMessage.warning("查无可选零件型号");
    }
  }
}

function selectModel(index) {
  processStore.setModelIndex(index);
  processStore.getTechnicParams();
  visible.value = false;
}

// watch(
//   () => processStore.doingModels,
//   (val) => {
//     if (val.length > 0) {
//       processStore.setModelIndex(0);
//     }
//   }
// );
</script>

<template>
  <el-row :gutter="12" class="item-width">
    <el-col :span="3"
      ><el-button
        :disabled="!(processStore.doingModels.length > 0)"
        style="width: 100%"
        :icon="ArrowLeftBold"
        @click="processStore.modelIndexInc(-1)"
    /></el-col>
    <el-col :span="18">
      <el-input
        v-model="partName"
        input-style="text-align: center"
        readonly
        @click="toSelectModel"
      />
    </el-col>
    <el-col :span="3"
      ><el-button
        :disabled="!(processStore.doingModels.length > 0)"
        style="width: 100%"
        :icon="ArrowRightBold"
        @click="processStore.modelIndexInc(1)"
    /></el-col>
  </el-row>
  <el-dialog v-model="visible" fullscreen title="请选择当前生产的零件型号">
    <el-scrollbar
      ref="selectScrollRef"
      class="select-box"
      :height="selectBoxHeight + 'px'"
      @mousedown="selectDragger.mouseDownHandler"
      @mouseup="selectDragger.mouseUpHandler"
      @mousemove="selectDragger.mouseMoveHandler"
      @mouseleave="selectDragger.mouseUpHandler"
    >
      <el-space class="select-space" direction="vertical">
        <el-button
          v-for="(item, index) in processStore.doingModels"
          :key="item.partCode"
          class="select-btn"
          size="large"
          @click="selectModel(index)"
          >{{ `${item.partName} 【${item.partCode}】` }}</el-button
        >
      </el-space>
    </el-scrollbar>
  </el-dialog>
</template>

<style scoped lang="scss">
.item-width {
  width: 100%;
}
.select-box {
  .select-space {
    width: 100%;
  }
}
.select-btn {
  width: 100% !important;
  height: 56px !important;
}
</style>
